<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          style="float: right; padding: 10px 15px"
          type="success"
          icon="el-icon-edit"
          @click="add('add')"
          >添加菜单</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        align="center"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'points', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="title" label="标题" width="180">
          <template #default="{ row }">
            <span class="el-icon-view" v-show="row.is_point">{{
              row.title
            }}</span>
            <span class="fa fa-file-o" v-show="!row.is_point">
              {{ row.title }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" width="960">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="add('edit', row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(row.id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <MenuAdd
      ref="menuAdd"
      :text="text"
      :pageTitle="pageTitle"
      :PermissionGroupsList="tableData"
      :treeStructure="true"
    ></MenuAdd>
  </div>
</template>

<script>
import MenuAdd from '../components/menu-add.vue'
import { list, remove } from '@/api/base/menus.js'
export default {
  components: {
    MenuAdd
  },
  data () {
    return {
      tableData: [],
      dialogVisible: true,
      text: '创建',
      pageTitle: '菜单',
      ruleForm: {
        isPoint: false,
        pid: null,
        code: '',
        title: ''
      },
      rules: {
        isPoint: [
          { required: true, message: '请选择是否权限点', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '请选择权限组名称', trigger: 'change' }
        ],
        code: [{ required: true, message: '请填写权限代码', trigger: 'blur' }],
        title: [{ required: true, message: '请填写权限标题', trigger: 'blur' }]
      },
      selectedLabel: '',
      popoverVisible: false,
      defaultExpandedKeys: [1, 2, 3]
    }
  },

  created () {
    this.initTable()
  },

  methods: {
    async initTable () {
      const res = await list()
      this.tableData = res.data
      console.log(res)
    },
    async del (id) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initTable()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async add (type, row) {
      if (type === 'add') {
        this.text = '创建'
        this.$refs.menuAdd.handleResetForm()
      } else {
        this.text = '修改'
        this.$refs.menuAdd.hanldeEditForm(row.id)
      }
      this.$refs.menuAdd.dialogFormV()
      //   this.$refs.menuAdd.dialogFormH()
      //   this.dialogFormVisible = false
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    onNodeClick (nodeData) {
      this.selectedLabel = nodeData.label
      this.popoverVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.dialog_content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 210px;
  margin: 0 auto;
  height: 100%;
}
</style>
